<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core" xmlns:openiot="http://openiot.org/tags" xmlns:c="http://java.sun.com/jsp/jstl/core">

<head />
<body>
	<ui:composition template="/WEB-INF/templates/main.xhtml">
		<ui:define name="title">Manage Roles</ui:define>
		<ui:define name="nav-links">
			<li><a href="home.jsf">Home</a></li>

			<!-- Authorization JSF Tag -->
			<openiot:hasPermission name="admin:user_mgmt_general">
				<li class="active"><a href="roles.jsf">Manage roles</a></li>
				<li><a href="users.jsf">Manage users</a></li>
				<li><a href="perms.jsf">Manage permissions</a></li>
				<openiot:hasPermission name="admin:add_services">
					<li><a href="services.jsf">Manage services</a></li>
				</openiot:hasPermission>
			</openiot:hasPermission>
			<c:if test="${rolesController.isDemoEnabled()}">
				<li><a href="guest_services.jsf">Guest services</a></li>
			</c:if>
		</ui:define>
		<ui:define name="content">
			<openiot:hasPermission name="admin:user_mgmt_general">
				<p:messages id="messages" showDetail="true" autoUpdate="true" closable="true" />
				<p:layout fullPage="false" id="layout" style="min-height:800px;">
					<p:layoutUnit position="north">
						<h:form id="serviceForm">
							<p:selectOneMenu value="#{rolesController.selectedServiceIdStr}" id="serviceSelector">
								<f:selectItem itemLabel="Select Service" itemValue="#{null}" />
								<f:selectItems value="#{rolesController.allServices}" var="service" itemValue="#{service.id}" itemLabel="#{service.name}" />
								<p:ajax update=":rolesForm:rolesTable :permForm:permissionsPanel :rolesForm:usersPanel" immediate="true" />
							</p:selectOneMenu>
						</h:form>
					</p:layoutUnit>

					<p:layoutUnit position="west" minSize="200" size="500" resizable="true">
						<h:form id="rolesForm">
							<!-- Form must be inside layoutUnit otherwise strange behavior -->
							<h:panelGrid columns="1" style="width:100%" cellpadding="5">
								<h:panelGroup layout="block" style="width:100%">
									<p:dataTable var="role" value="#{rolesController.roles}" rowKey="#{role.name}" id="rolesTable" resizableColumns="true" editable="false"
										selectionMode="single" selection="#{rolesController.selectedRole}" style="table-layout: fixed">

										<p:ajax event="rowEdit" listener="#{rolesController.onEditRole}" update=":messages" />
										<p:ajax event="rowEditCancel" listener="#{rolesController.onCancelEditRole}" update=":messages" />

										<p:ajax event="rowSelect" update=":permForm:permissionsPanel :rolesForm:usersPanel :rolesForm:rolesTable:removeRoleBtn" />
										<p:ajax event="rowUnselect" update=":permForm:permissionsPanel :rolesForm:usersPanel :rolesForm:rolesTable:removeRoleBtn" />


										<f:facet name="header">
											<h:outputText value="Available Roles" />
										</f:facet>

										<p:column headerText="Name">
											<!-- <p:cellEditor>
												<f:facet name="output">
													<h:outputText value="#{role.name}" />
												</f:facet>
												<f:facet name="input">
													<p:inputText value="#{role.name}" style="width:100%" required="true" label="Role Name" />
												</f:facet>
											</p:cellEditor>
											 -->
											<h:outputText value="#{role.name}" />
										</p:column>

										<p:column headerText="Description">
											<!--<p:cellEditor>
												<f:facet name="output">
													<h:outputText value="#{role.description}" />
												</f:facet>
												<f:facet name="input">
													<p:inputText value="#{role.description}" style="width:100%" required="true" label="Role Description" />
												</f:facet>
											</p:cellEditor>
											 -->
											<h:outputText value="#{role.description}" />
										</p:column>

										<!-- 
										<p:column headerText="Options" width="50">
											<p:rowEditor />
										</p:column>
										 -->

										<f:facet name="footer">
											<openiot:hasPermission name="admin:create_role:#{rolesController.selectedServiceName}">
												<p:commandButton id="addRoleBtn" update=":addRoleDlgForm:addRoleDlg" icon="ui-icon-plusthick" title="New Role"
													onclick="PF('addRoleDlgVar').show(); return false;" disabled="#{empty rolesController.selectedServiceIdStr}" />
											</openiot:hasPermission>

											<p:commandButton id="removeRoleBtn" icon="ui-icon-closethick" title="Delete"
												actionListener="#{rolesController.removeRole(rolesController.selectedRole)}" update="rolesTable :permForm:permissionsPanel :rolesForm:usersPanel"
												disabled="#{not rolesController.hasRoleDeletionPermission() or empty rolesController.selectedRole}">
												<p:confirm header="Confirmation" message="Are you sure you want to delete Role?" icon="ui-icon-alert" />
											</p:commandButton>

										</f:facet>

									</p:dataTable>
								</h:panelGroup>

								<h:panelGroup id="usersPanel" layout="block" style="width:100%">
									<p:dataTable var="user" value="#{rolesController.selectedRoleUsers}" id="usersTable" tableStyle="width:100%; font-size:smaller;" selectionMode="single"
										selection="#{rolesController.selectedUser}" rowKey="#{user.username}" emptyMessage="User list is empty." resizableColumns="true">

										<p:ajax event="rowSelect" update=":rolesForm:usersTable:removeUserBtn" />
										<p:ajax event="rowUnselect" update=":rolesForm:usersTable:removeUserBtn" />

										<f:facet name="header">
											<h:outputText value="Role Users" />
										</f:facet>

										<p:column headerText="Full name" width="35%">
											<h:outputText value="#{user.name}" />
										</p:column>

										<p:column headerText="Username" width="30%">
											<h:outputText value="#{user.username}" />
										</p:column>

										<p:column headerText="Email" width="35%">
											<h:outputText value="#{user.email}" />
										</p:column>

										<f:facet name="footer">
											<p:commandButton id="addUserBtn" update=":dlgForm:addUserDlg" icon="ui-icon-plusthick" title="Add User" oncomplete="PF('addUserDlg').show();"
												disabled="#{empty rolesController.selectedRoleOtherUsers}" />
											<p:commandButton id="removeUserBtn" icon="ui-icon-closethick" title="Delete"
												actionListener="#{rolesController.removeUser(rolesController.selectedUser)}" update=":rolesForm:usersPanel"
												disabled="#{empty rolesController.selectedUser}">
												<p:confirm header="Confirmation" message="Are you sure you want to delete User?" icon="ui-icon-alert" />
											</p:commandButton>
										</f:facet>
									</p:dataTable>
								</h:panelGroup>
							</h:panelGrid>
						</h:form>
					</p:layoutUnit>

					<p:layoutUnit position="center">
						<h:form id="permForm">
							<h:panelGroup layout="block" style="width:100%">
								<p:panelGrid id="permissionsPanel" columns="1" style="width:100%">
									<f:facet name="header">Role Permissions</f:facet>
									<p:dataTable var="perm" value="#{rolesController.selectedRolePermissions}" rowKey="#{perm.name}" tableStyle="width:100%"
										emptyMessage="Permission list is empty.">
										<p:column headerText="Name" width="45%">
											<h:outputText value="#{perm.name}" />
										</p:column>

										<p:column headerText="Description" width="45%">
											<h:outputText value="#{perm.description}" />
										</p:column>

										<p:column headerText="Options" width="10%">
											<p:commandButton id="removePermBtn" icon="ui-icon-closethick" title="Delete" actionListener="#{rolesController.removePermission(perm)}"
												update=":permForm:permissionsPanel" disabled="#{false}">
												<p:confirm header="Confirmation" message="Are you sure you want to revoke Permission from selected role?" icon="ui-icon-alert" />
											</p:commandButton>
										</p:column>
									</p:dataTable>
									<f:facet name="footer">
										<p:commandButton id="addPermBtn" update=":dlgForm:addPermDlg" icon="ui-icon-plusthick" title="Add Permission" oncomplete="PF('addPermDlg').show();"
											disabled="#{empty rolesController.selectedRole or empty rolesController.selectedServiceIdStr}" />
									</f:facet>
								</p:panelGrid>
							</h:panelGroup>
						</h:form>
					</p:layoutUnit>

					<p:confirmDialog global="true" showEffect="fade" hideEffect="explode">
						<p:commandButton value="Yes" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
						<p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
					</p:confirmDialog>

					<h:form id="addRoleDlgForm">
						<p:dialog id="addRoleDlg" header="New Role" widgetVar="addRoleDlgVar" modal="true" dynamic="true">
							<p:ajax event="close" update="addRoleDlg" />
							<h:panelGrid columns="2" style="margin-bottom:10px; width:100%;" cellpadding="5" columnClasses="labelColumn">
								<!-- <p:messages for="addRoleDlg" id="addRoleDlg_messages" showDetail="true" autoUpdate="true" closable="true" />  -->
								<h:outputLabel for="name" value="Name:" />
								<p:inputText id="name" value="#{rolesController.newRole.name}" required="true" requiredMessage="Role name must not be empty." style="width:90%;"/>
								<h:outputLabel for="description" value="Description:" />
								<p:inputText id="description" value="#{rolesController.newRole.description}" required="true" requiredMessage="Role description must not be empty." style="width:90%;"/>
								<f:facet name="footer">
									<p:commandButton id="addRoleDlg_addButton" value="Add" actionListener="#{rolesController.addRole}" oncomplete="handleAddRoleRequest(xhr, status, args)"
										update=":rolesForm:rolesTable :permForm:permissionsPanel :rolesForm:usersPanel" />
									<p:commandButton immediate="true" id="addRoleDlg_cancelButton" value="Cancel" actionListener="#{rolesController.cancelAddRole}"
										oncomplete="PF('addRoleDlgVar').hide()" />
								</f:facet>
							</h:panelGrid>
						</p:dialog>
					</h:form>

					<h:form id="dlgForm">
						<p:dialog id="addUserDlg" header="Add User" widgetVar="addUserDlg" modal="true" dynamic="true" width="750">
							<h:panelGrid columns="1" cellpadding="5">
								<p:dataTable var="otherUser" value="#{rolesController.selectedRoleOtherUsers}" id="otherUsersTable" tableStyle="width:100%; font-size:smaller;"
									selectionMode="single" selection="#{rolesController.selectedOtherUser}" rowKey="#{otherUser.username}" emptyMessage="User list is empty."
									scrollable="true" scrollHeight="350" >

									<p:ajax event="rowSelect" update=":dlgForm:addUserDlg_addButton" />

									<p:column headerText="Full name" width="35%">
										<h:outputText value="#{otherUser.name}" />
									</p:column>

									<p:column headerText="Username" width="30%">
										<h:outputText value="#{otherUser.username}" />
									</p:column>

									<p:column headerText="Email" width="35%">
										<h:outputText value="#{otherUser.email}" />
									</p:column>

								</p:dataTable>
								<f:facet name="footer">
									<p:commandButton id="addUserDlg_addButton" value="Add" actionListener="#{rolesController.addUser}" update=":rolesForm:usersTable"
										disabled="#{empty rolesController.selectedOtherUser}" oncomplete="PF('addUserDlg').hide()" />
									<p:commandButton id="addUserDlg_cancelButton" value="Cancel" onclick="PF('addUserDlg').hide()" />
								</f:facet>
							</h:panelGrid>
						</p:dialog>

						<p:dialog id="addPermDlg" header="Add Permission" widgetVar="addPermDlg" modal="true" dynamic="true" width="750">
							<h:panelGrid columns="1" cellpadding="5">

								<p:dataTable var="otherPerm" value="#{rolesController.selectedRoleOtherPermissions}" id="otherPermsTable" tableStyle="width:100%; font-size:smaller;"
									selectionMode="single" selection="#{rolesController.selectedOtherPermission}" rowKey="#{otherPerm.name}" emptyMessage="Permission list is empty." 
									scrollable="true" scrollHeight="350">

									<p:ajax event="rowSelect" update=":dlgForm:addPermDlg_addButton" />

									<p:column headerText="Name" width="50%">
										<h:outputText value="#{otherPerm.name}" />
									</p:column>

									<p:column headerText="Description" width="50%">
										<h:outputText value="#{otherPerm.description}" />
									</p:column>

								</p:dataTable>
								<f:facet name="footer">
									<p:commandButton id="addPermDlg_addButton" value="Add" actionListener="#{rolesController.addPermission}" update=":permForm:permissionsPanel"
										disabled="#{empty rolesController.selectedOtherPermission}" oncomplete="PF('addPermDlg').hide()" />
									<p:commandButton id="addPermDlg_cancelButton" value="Cancel" onclick="PF('addPermDlg').hide()" />
								</f:facet>
							</h:panelGrid>
						</p:dialog>
					</h:form>

				</p:layout>
				<script type="text/javascript">  
    function handleAddRoleRequest(xhr, status, args) {  
        if(args.validationFailed || !args.roleAdded) {  
            PF('addRoleDlgVar').jq.effect("shake", { times:5 }, 100);  
        }   
        else {  
            PF('addRoleDlgVar').hide();  
        }  
    }  
</script>
			</openiot:hasPermission>
		</ui:define>
	</ui:composition>
</body>
</html>
